<template>
  <div>
    <el-autocomplete
      size="small"
      style="width: 100%"
      ref="autocomplete"
      v-model="value"
      clearable
      value-key="label"
      :disabled="disabled"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @clear="handleClear"
      @select="handleSelectChange"
    >
      <div slot="prefix" class="pl5 pt5" v-if="!isAdd || !value">旧</div>
      <div slot="prefix" class="pl5 pt5" style="color: #67c23a" v-else>新</div>
      <div slot="suffix" class="pr5 pt5" v-if="isAdd && value">
        <el-button type="text" style="font-size: 12px" @click="handleSave"
          >保存</el-button
        >
      </div>
    </el-autocomplete>
  </div>
</template>
  <script>
export default {
  name: "screen",
  props: {
    sourceData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    label: {
      type: [String],
      default: () => {
        return "";
      },
    },
    code: {
      type: [String],
      default: () => {
        return "";
      },
    },
    fatherValue: { type: String },
  },
  model: {
    prop: "fatherValue", // 父组件v-model绑定的值传递给props中的fatherValue
    event: "childValueChange",
    // 通过emit触发childValueChange将内部值传递给父组件v-model绑定的值
  },
  data() {
    return {
      value: this.fatherValue,
      isAdd: false,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    sourceData: {
      handler(newVal, oldVal) {
        if (newVal.length) {
          try {
            if (this.label) {
              for (var x of newVal) {
                if (x.label == this.label) {
                  this.value = x.productSpecificationCode;
                  this.$emit("childValueChange", this.value);
                  break;
                }
              }
            } else {
              this.value = newVal.filter((x) => this.value == x.value)[0].label;
            }
          } catch {}
          if (this.label) {
            this.value = this.label;
          }
          let arr = newVal.filter((item) => {
            return this.value == item.label;
          });
          this.isAdd = arr.length < 1 ? true : false;
        }
      },
      immediate: true,
      deep:true
    },
    fatherValue:{
      handler(newVal, oldVal) {
        if(!newVal){
          this.value = ''
        }
      }
    }
  },

  methods: {
    //监听输入框事件
    querySearch(queryString, callback) {
      var results = queryString
        ? this.sourceData.filter(this.createFilter(queryString))
        : this.sourceData;

      let arr = results.filter((item) => {
        return queryString == item.label;
      });
      this.isAdd = arr.length < 1 ? true : false;
      this.$emit("change", this.value);
      this.$forceUpdate();
      // 调用 callback 返回建议列表的数据
      callback(results);
    },

    //过滤数据
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.label.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    //清空事件
    handleClear(e) {
      console.log(this.value);
      this.$refs.autocomplete.activated = true;
      // this.$emit("clear", this.value);
      this.$emit("childValueChange", this.value);
    },

    //下拉框选择事件
    handleSelectChange(e) {
      let arr = this.sourceData.filter((item) => {
        return e.value == item.value;
      });
      this.isAdd = arr.length < 1 ? true : false;
      this.$emit("childValueChange", e.value);
    },

    //保存
    handleSave() {
      this.$emit("handleSaveSelect", this.value);
      this.isAdd = false;
      this.value = "";
    },
  },
};
</script>
  <style lang="scss" scoped>
.select {
  max-width: 140px;
}

::v-deep .el-input__suffix-inner {
  display: flex;
}
</style>
  